<%--
  Created by IntelliJ IDEA.
  User: LC
  Date: 2019/1/17
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<link rel="stylesheet" href="/static/dtree/dtree.css">
<link rel="stylesheet" href="/static/dtree/font/dtreefont.css">

<head>
    <title>Title</title>
</head>
<body>
<div style="height: 400px;overflow: auto;">
    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <ul id="dtree" class="dtree" data-id="0"></ul>
            </div>
            <div class="layui-col-md6">
                <button class="layui-btn layui-btn-radius" id="create">生成树</button>
                <button class="layui-btn layui-btn-radius" id="getNodes">获取选中节点</button>
                <button class="layui-btn layui-btn-radius" id="test">弹出树</button>
            </div>
        </div>
    </div>

</div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script>
    layui.extend({
        dtree: '/static/dtree/dtree'
    }).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
        var element = layui.element,
            layer = parent.layer === undefined ? layui.layer : top.layer
            table = layui.table,
            util = layui.util,
            dtree = layui.dtree,
            $ = layui.$;

        dtree.render({
            elem: "#dtree",
            url: "/json/mine.json",
            method:'GET',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            checkbar: true,
            checkbarType: "all" // 默认就是all，其他的值为： no-all  p-casc   self  only
        });

        $('#getNodes').click(function () {
            var params = dtree.getCheckbarNodesParam("dtree");
            layer.msg(JSON.stringify(params));
        })
        $('#test').click(function () {
                layer.open({
                    type: 2, //type:0 也行
                    title: "授权",
                    area: ["400px", "80%"],
                    content: '/per',
                    btn: ['确定','取消']
            });
        })
        // 点击节点触发回调
        dtree.on("node('dtree')" ,function(obj){
            layer.msg(JSON.stringify(obj.param));
        });
    })
</script>
